<template>
  <div class="combination-input">
    <div v-if="!isCombination" class="input-box">
      <a-input
        :value="modelValue"
        @input="$emit('update:modelValue', $event.target.value)"
        :placeholder="$getText('PH_CSS_LENGTH')"
      />
    </div>
    <div v-else class="input-box">
      <a-select v-model:value="form.containerKey" placeholder="请选择布局容器" @change="setVal">
        <a-select-option v-for="item in containerList" :key="item.key" :value="item.key">
          {{ item.title }}
        </a-select-option>
      </a-select>
      <span>的</span>
      <a-form-item-rest>
        <a-select v-model:value="form.domPros" :options="domProsType" placeholder="请选择css属性" @change="setVal">
        </a-select>
      </a-form-item-rest>
      <span>加上</span>
      <a-form-item-rest>
        <a-input-number v-model:value="form.add" @input="setVal" placeholder="请输入数字" />
      </a-form-item-rest>
    </div>
    <a-button class="switch" @click="handle" type="primary">切换</a-button>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
/**
 * 组合输入
 * @author 朱琦
 * @date   时间：2023/2/10
 */
const defaultForm = {
  containerKey: null, // 容器key
  domPros: null, // dom属性
  add: null // 添加值
}
export default {
  name: 'CombinationInput',
  props: {
    modelValue: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  emits: ['update:modelValue'],
  components: {},
  data() {
    return {
      isCombination: false,
      form: { ...defaultForm },
      domProsType: [
        { label: '宽度', value: 'width' },
        { label: '高度', value: 'height' }
      ]
    }
  },
  watch: {
    modelValue: {
      immediate: true,
      handler(nv, ov) {
        if (nv && nv.constructor === Array) {
          Object.keys(defaultForm).forEach((key, i) => {
            this.form[key] = nv[i]
          })
          this.isCombination = true
        } else {
          this.isCombination = false
        }
      }
    }
  },
  computed: {
    ...mapGetters({
      containerList: 'page-manage-config/containerList'
    })
  },
  created() {},
  mounted() {},
  methods: {
    /**
     * 点击按钮切换输入类型
     */
    handle() {
      this.isCombination = !this.isCombination
      // 数据初始化
      this.isCombination && (this.form = { ...defaultForm })
      this.$emit('update:modelValue', this.isCombination ? [null, null, null] : '')
    },
    setVal() {
      this.$emit('update:modelValue', [this.form.containerKey, this.form.domPros, this.form.add])
    }
  }
}
</script>

<style scoped lang="less">
.combination-input {
  display: flex;
  .input-box {
    flex: 1;
    display: flex;
    align-items: center;
    > span {
      margin: 0 2px;
      flex-shrink: 0;
    }
    .ant-input-number {
      width: 7em;
      flex-shrink: 0;
    }
  }
  .switch {
    flex-shrink: 0;
    margin-left: 6px;
  }
}
</style>
